<template>
  <div id="sho">
    <div class="header">
      <div v-if="!addre.is_default" class="one" @click="$router.push('/Address')">
        <img src="../../assets/img/sh1.png" alt="">
        <img src="../../assets/img/sh2.png" alt="">
      </div>
      <div v-else>
        <li class="li">
          <img src="@/assets/img/sh1.png" alt="">
          <div class="cent">
            <p class="p1">{{addre.user_name}} <span>{{addre.mobile}}</span> </p>
            <p class="p2">
              <span>{{addre.province_name+addre.city_name+addre.district_name+addre.address}}</span>
            </p>
          </div>
          <van-icon name="arrow" @click="$router.push('/Address')" />
        </li>
      </div>
    </div>
    <div class="detil">
      <div class="book" v-if="type==12">
        <div class="left">
          <img :src="list.cover_img" alt="">
          <span>{{list.title}}</span>
        </div>
        <div class="right">
          <span>{{list.price | toFixPrice}}</span>
          <p>x{{num}}</p>
        </div>
      </div>
      <div v-else class="kechen">
        <div v-if="list.length!=0">
          <p>
            <span class="keshina">{{keshi.name}}</span>
            <span class="listname">{{list.title}}</span>
          </p>
          <p class="pi-teacher" v-if="list.section_num">共{{list.section_num}}课时</p>
        </div>
        <p class="p">
          <font>{{list.price | toFixPrice}}</font>
        </p>
      </div>
    </div>
    <div class="num" v-if="type==12">
      <p>购买数量</p>
      <van-stepper v-model="num" input-width="30px" button-size="20px" />
    </div>
    <div class="you">
      <van-cell-group>
        <van-cell title="优惠券" :value="checked_coupon.coupon_id ? `满 ${checked_coupon.full_reduction/100} 减 ${checked_coupon.discounted_price/100}`: '无可用'" :is-link="coupons.length > 1 " @click="youhui" />
      </van-cell-group>
    </div>
    <div class="price">
      <ul>
        <li>
          <p>商品金额</p>
          <font>{{list.price | toFixPrice}}</font>
        </li>
        <li>
          <p>运费</p>
          <font>{{list.ship_price | toFixPrice}}</font>
        </li>
        <li>
          <p>优惠券金额</p>
          <span>
            <font>-</font>
            <font>{{checked_coupon.discounted_price | toFixPrice}}</font>
          </span>
        </li>
        <li>
          <p>合计</p>
          <font style="color:#e02020;font-size:18px">{{order_price | toFixPrice}}</font>
        </li>
      </ul>
    </div>
    <div class="but">
      <p>实付价格：<span>{{order_price | toFixPrice}}</span></p>
      <button @click="onsubimt">提交订单</button>
    </div>
  </div>
</template>
<script>
import { addres, shopbook, shopyou, shopsub, shai } from '@/api/user.js'
export default {
  data() {
    return {
      id: this.$route.query.id,
      type: this.$route.query.type,
      addre: [],
      cid: this.$store.state.dizhiId,
      list: [],
      num: 1,
      coupons: [],
      checked_coupon: {},
      order_price: 0,
      keshi: {}
    }
  },
  methods: {
    async getdtil() {
      let { data: data } = await shopbook({
        shop_id: this.id,
        type: this.type,
        product_number: this.num,
        spell_id: '',
        group_id: 0
      })
      if (this.type == 12) {
        this.list = data.data.info
        this.checked_coupon = data.data.info.checked_coupon
        this.order_price = data.data.info.order_price
      } else {
        this.list = data.data.info
        this.clear()
      }
    },
    async getaddres() {
      console.log(this.cid)
      let { data: data } = await addres()
      if (!this.cid) {
        data.data.forEach(item => {
          if (item.is_default == 1) {
            this.addre = item
          }
        })
      } else {
        data.data.forEach(item => {
          if (item.id == this.cid) {
            this.addre = item
          }
        })
        this.$store.commit('qin')
      }
      console.log(this.addre, 77)
    },
    async getCouponList() {
      let { data: data } = await shopyou({
        shop_id: this.id,
        type: this.type
      })
      console.log(data, 7788)
    },
    youhui() {
      console.log(11)
    },
    async onsubimt() {
      let params = {
        shop_id: this.id,
        type: this.type,
        user_coupon_id: this.checked_coupon.coupon_id,
        address_id: this.type == 12 || this.list.is_materials ? this.addre.id : '',
        product_number: this.num
      }
      let deviceType = 'H5'
      let { data: data } = await shopsub(params, deviceType)
      console.log(data)
      if (data.code && data.code == 203) {
        let res = JSON.parse(data.msg)
        this.$toast({
          message: res.msg,
          duration: 1000
        })
      } else {
        this.$router.push('/money?id=' + data.data.id)
      }
    },
    async clear() {
      let { data: data } = await shai()

      data.data.appCourseType.forEach(item => {
        if (item.id == this.list.course_type) {
          this.keshi = item
        }
      })

      console.log(this.keshi, '课类')
      console.log(this.list, 8)
    }
  },
  watch: {
    num(val) {
      this.getdtil()
    }
  },
  created() {
    this.getaddres()
    this.getdtil()
    this.getCouponList()
  }
}
</script>
<style lang="scss" scoped>
#sho {
  background: #f0f2f5;
  height: 100%;
  overflow: hidden;
}
.header {
  margin: 10px;
  padding: 15px;
  background: white;
  border-radius: 10px;
  .one {
    display: flex;
    align-items: flex-end;
    :nth-child(1) {
      height: 30px;
      width: 30px;
    }
    :nth-child(2) {
      height: 20px;
      width: 110px;
      margin-left: 15px;
    }
  }
}
.li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  img {
    width: 30px;
    height: 30px;
  }
  .cent {
    flex: 1;
    margin-left: 10px;
    .p1 {
      font-size: 15px;
      span {
        font-size: 12px;
        color: #8c8c8c;
      }
    }
    .p2 {
      font-size: 12px;
      margin-top: 2px;
    }
  }
  i {
    font-size: 16px;
    color: #ccc;
  }
}
.detil {
  margin: 10px 10px;
  background: white;
  padding: 15px;
  border-radius: 15px;
  .book {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .left {
      display: flex;
      align-items: flex-start;
      img {
        width: 70px;
        height: 100px;
        border-radius: 15px;
      }
      span {
        margin-left: 10px;
        margin-top: 5px;
        font-size: 14px;
      }
    }
    .right {
      text-align: right;
      span {
        font-size: 17px;
        color: #ee1f1f;
        margin-bottom: 5px;
      }
      p {
        color: #8c8c8c;
      }
    }
  }
  .kechen {
    display: flex;
    justify-content: space-between;
    div {
      p {
        .listname {
          font-size: 14px;
        }
        .keshina {
          color: #ea7a2f;
          background: #fdf3eb;
          margin-right: 10px;
          padding: 3px 5px;
        }
      }
      .pi-teacher {
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        margin-top: 20px;
      }
    }
    .p {
      color: #ee1f1f;
      font-size: 16px;
    }
  }
}
.num {
  margin: 10px;
  background: white;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  p {
    font-size: 16px;
  }
}
.you {
  margin: 10px;
  background: white;
  border-radius: 10px;
  padding: 15px 10px;
  .van-cell {
    padding: 0;
  }
  .van-cell__title {
    font-size: 16px;
  }
  .van-cell__value {
    font-size: 16px;
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 0;
  }
}
.price {
  margin: 10px;
  background: white;
  border-radius: 10px;
  padding: 15px 10px;
  color: #595959;
  ul {
    li {
      display: flex;
      justify-content: space-between;
      padding: 2px 0;
      font-size: 14px;
    }
  }
}
.but {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 2px 5px 0px #ccc;
  p {
    font-size: 14px;
    span {
      color: #e02020;
    }
  }
  button {
    width: 110px;
    height: 35px;
    border-radius: 25px;
    border: none;
    background: #e60012;
    color: white;
    margin: 0 15px;
  }
}
</style>
